<template>
  <div class="mine">
    <NavBar />
    <div class="wrapper">
      <div class="topmsg">
        <div class="img">
          <img src="../../../public/images/mine/touxiang.png" alt="" />
        </div>
        <div class="user" @click="changeName">
          <span class="userName">{{ userName }}</span>
          <div class="number">
            <div class="pick">
              <p class="pickn">0</p>
              <p class="pickl">关注</p>
            </div>
            <div class="fans">
              <p class="fansn">0</p>
              <p class="fansl">粉丝</p>
            </div>
          </div>
        </div>
      </div>
      <div class="imgmsg">
        <ul class="imglist">
          <li
            v-for="(item, index) in state.Image"
            :key="item"
            @click="changeList(index)"
          >
            <span>
              <i>|</i>
              {{ item.boxTitle }}
            </span>
            <img :src="item.boxImg" alt="" />
          </li>
        </ul>
      </div>
      <div class="List" @click="check_login_status">
        <div class="left-box">
          <div class="img-box">
            <img :src="state.min1.minImg" />
          </div>
          <div class="text-box">
            <span>{{ state.min1.minTitle }}</span>
          </div>
        </div>
        <div class="right-icon">
          <van-icon name="arrow" size="20" color="#B9B9B9" />
        </div>
      </div>
      <div class="banner" @click="check_login_status">
        <img :src="state.banner.bannerImg" />
      </div>
      <div class="usual-box" @click="check_login_status">
        <div class="left-img">
          <img :src="state.min2.minImg" />
        </div>
        <div class="right-text">
          <div class="text">
            <span>{{ state.min2.minTitle }}</span>
          </div>
          <div class="icon">
            <van-icon name="arrow" size="20" color="#B9B9B9" />
          </div>
        </div>
      </div>
      <div class="List1" @click="check_login_status">
        <div class="left-box">
          <div class="img-box">
            <img :src="state.min3.minImg" />
          </div>
          <div class="text-box">
            <span>{{ state.min3.minTitle }}</span>
          </div>
        </div>
        <div class="right-icon">
          <van-icon name="arrow" size="20" color="#B9B9B9" />
        </div>
      </div>
      <div class="juxing"></div>
      <div
        class="usual-box"
        v-for="item in state.min"
        :key="item.minId"
        @click="check_login_status"
      >
        <div class="left-img">
          <img :src="item.minImg" alt="" />
        </div>
        <div class="right-text">
          <div class="text">
            <span>{{ item.minTitle }}</span>
          </div>
          <div class="icon">
            <van-icon name="arrow" size="20" color="#B9B9B9" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from "@/components/mine/MineNav.vue";
import "../../assets/css/Mine/Mine.less";
import { getMineApi } from "../../utils/api";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Dialog } from "vant";
export default {
  setup() {
    const router = useRouter();
    // const routes = useRouter();
    const userName = ref("立即登录");
    const changeName = () => {
      if (localStorage.getItem("account_id")) {
        Dialog.confirm({
          // title: "标题",
          message: "你确定要退出账号吗？",
        })
          .then(() => {
            // on confirm
            localStorage.removeItem("account_id");
            checkLoginStatus();
          })
          .catch(() => {
            // on cancel
          });
      } else {
        router.push("/fastlogin");
      }
    };
    const check_login_status = () => {
      if (!localStorage.getItem("account_id")) {
        router.push("/fastlogin");
      }
    };
    const state = reactive({
      Image: [],
      min1: [],
      banner: [],
      min2: [],
      min3: [],
      min: [],
    });
    const getMineList = () => {
      getMineApi().then((res) => {
        state.Image = res[0].box;
        state.min1 = res[0].min[0];
        state.banner = res[0].banner;
        state.min2 = res[0].min[1];
        state.min3 = res[0].min[2];
        state.min = res[0].min.slice(3);
      });
    };
    const checkLoginStatus = () => {
      if (localStorage.getItem("account_id")) {
        userName.value = localStorage.getItem("account_id");
      } else {
        userName.value = "立即登录";
      }
    };

    onMounted(() => {
      getMineList();
      checkLoginStatus();
      check_login_status;
    });

    const changeList = (i) => {
      if (localStorage.getItem("account_id")) {
        if (i === 0) {
          router.push("/skinchange");
        } else if (i === 1) {
          router.push("/tryimage");
        }
      } else {
        router.push("/login");
      }
    };

    return {
      router,
      userName,
      changeName,
      state,
      getMineList,
      changeList,
      checkLoginStatus,
      check_login_status,
    };
  },
  components: {
    NavBar,
  },
};
</script>
